<script setup lang="ts">
import { numberFormatter } from '@/plugins/number.plugin'
const { schedule, feeInfo } = defineProps(['schedule', 'feeInfo'])
</script>
<template>
  <div class="summary-container">
    <div class="summary-main-container">
      <div class="summary-schedule-container">
        <div class="schedule-title">Your new suit is preparing!</div>
        <div class="schedule-related-info">We will prepare your suit follow this:</div>
        <div class="schedule-items-container">
          <ap-timeline>
            <ap-timeline-item v-for="item,index in schedule" :key="index" :label="item.content">{{ item.name }}</ap-timeline-item>
          </ap-timeline>
        </div>
      </div>
      <div class="summary-fee-container">
        <div class="fee-title">{{ feeInfo.name }}</div>
        <div class="fee-items-container">
          <div class="fee-item" v-for="item in feeInfo.renderOrder" :key="item">
            <div class="label">{{ feeInfo.items[item].name }}</div>
            <div class="value">
              <span v-if="feeInfo.items[item].fee > 0 && feeInfo.items[item].addMark">+ RMB</span> {{ numberFormatter(feeInfo.items[item].fee, 100) }}
            </div>
          </div>
          <div class="fee-item total-fee-item">
            <div class="label">Total Fee:</div>
            <div class="value">RMB {{ numberFormatter(499900, 100) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="summary-buttons-container">
      <div>
        <div class="tip">
          <p>Now,</p>
          <p>Consider it once more?</p>
        </div>
        <div class="button">
          <ap-button fluid>Add to Cart</ap-button>
        </div>
      </div>
      <div>
        <div class="tip">
          <p>Or buy it now</p>
        </div>
        <div class="button">
          <ap-button type="primary" fluid>Place the order</ap-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.summary-container {
  .summary-main-container {
    .summary-schedule-container {
      .schedule-title {
        font-weight: bold;
      }
      .schedule-related-info {
        color: #999999;
      }
      .schedule-items-container {}
    }
    .summary-fee-container {
      .fee-title {
        font-weight: bold;
      }
      .fee-items-container {
        .fee-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          justify-items: center;
          color: #999999;
          .label {}
          .value {}
        }
        .total-fee-item {
          color: #000000;
        }
      }
    }
  }
  .summary-buttons-container {
    & > div {
      &:first-child {
        margin-top: 0;
      }
    }
    .tip {
      color: #999999;
      &:first-child {
        margin-top: 0;
      }
      p {
        padding: 0;
        margin: 0;
        &:first-child {
          margin-top: 0;
        }
      }
    }
    .button {}
  }
}

// Mobile
@media screen and (max-width: 767px) {
  .summary-container {
    .summary-main-container {
      .summary-schedule-container {
        width: 345px;
        .schedule-title {
          font-size: 20px;
        }
        .schedule-related-info {
          font-size: 14px;
        }
        .schedule-items-container {
          margin-top: 20px;
        }
      }
      .summary-fee-container {
        width: 345px;
        margin-top: 45px;
        .fee-title {
          font-size: 14px;
        }
        .fee-items-container {
          margin-top: 15px;
          .fee-item {
            margin-top: 5px;
            font-size: 14px;
            line-height: 24px;
            .label {
              width: 140px;
            }
            .value {
              width: calc(100% - 140px - 20px);
              text-align: right;
            }
          }
          .total-fee-item {
            margin-top: 40px;
          }
        }
      }
    }
    .summary-buttons-container {
      margin-top: 45px;
      & > div {
        margin-top: 45px;
        &:first-child {
          margin-top: 0;
        }
      }
      .tip {
        margin-top: 40px;
        p {
          font-size: 14px;
          margin-top: 15px;
        }
      }
      .button {
        margin-top: 15px;
      }
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .summary-container {
    .summary-main-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .summary-schedule-container {
        width: 345px;
        .schedule-title {
          font-size: 20px;
        }
        .schedule-related-info {
          font-size: 14px;
        }
        .schedule-items-container {
          margin-top: 20px;
        }
      }
      .summary-fee-container {
        width: 345px;
        .fee-title {
          font-size: 14px;
        }
        .fee-items-container {
          margin-top: 15px;
          .fee-item {
            margin-top: 5px;
            font-size: 14px;
            line-height: 24px;
            .label {
              width: 140px;
            }
            .value {
              width: calc(100% - 140px - 20px);
            }
          }
          .total-fee-item {
            margin-top: 40px;
          }
        }
      }
    }
    .summary-buttons-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 45px;
      & > div {
        width: 345px;
      }
      .tip {
        margin-top: 40px;
        p {
          font-size: 14px;
          margin-top: 15px;
        }
      }
      .button {
        margin-top: 15px;
      }
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .summary-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    .summary-main-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .summary-schedule-container {
        width: 300Px;
        .schedule-title {
          font-size: 20Px;
        }
        .schedule-related-info {
          font-size: 14Px;
        }
        .schedule-items-container {
          margin-top: 20Px;
        }
      }
      .summary-fee-container {
        width: 300Px;
        .fee-title {
          font-size: 14Px;
        }
        .fee-items-container {
          margin-top: 15Px;
          .fee-item {
            margin-top: 5Px;
            font-size: 14Px;
            line-height: 24Px;
            .label {
              width: 140Px;
            }
            .value {
              width: calc(100% - 140Px - 20Px);
            }
          }
          .total-fee-item {
            margin-top: 40Px;
          }
        }
      }
    }
    .summary-buttons-container {
      width: 300Px;
      & > div {
        margin-top: 40Px;
      }
      .tip {
        p {
          font-size: 14Px;
          margin-top: 15Px;
        }
      }
      .button {
        margin-top: 15Px;
      }
    }
  }
}
</style>